import React, { Component } from 'react'
import { observer } from 'mobx-react/custom'
import AchievementVM from 'cvm/achievement/achievement'
import './achievement.less'

const AchievementList = observer(({ vm }) => {
  return (
    <div className='achievement-flow'>
      {
        vm.orderRecord.length > 0 ? vm.orderRecord.map((item, index) => {
          return (
            <div className='flex-wrap flow-record' key={index}>
              <div className='flex-3'>
                {
                  item.GoodType === 0 &&
                  <div>
                    <p className='date'>{item.GoodTypeStr}-{item.ValidDays}天</p>
                    <p className='percent'>销售佣金{item.BonusOne}% 服务佣金{item.BonusTwo}%</p>
                  </div>
                }
                {
                  item.GoodType === 1 &&
                  <div>
                    <p className='date'>{item.GoodTypeStr}-{item.ValidDays}个</p>
                    <p className='percent'>销售佣金{item.BonusOne}%</p>
                  </div>
                }
                {
                  item.GoodType === 2 &&
                  <div>
                    <p className='date'>{item.GoodTypeStr}-{item.ValidDays}张</p>
                    <p className='percent'>销售佣金{item.BonusOne}%</p>
                  </div>
                }
              </div>
              <div className='flex-1'>
                <p className='price'>￥{item.Total.toFixed(2)}</p>
                <p className='time'>{item.CreatedTimeStr}</p>
              </div>
            </div>
          )
        }) : vm.record && <div className='none-record'>
          <img src={require('../../images/none-tixian.png')} />
          <p>暂无业绩流水</p>
        </div>
      }
    </div>
  )
})

@observer
class achievement extends Component {
  constructor (props) {
    super(props)
    window.document.title = '业绩流水'
    this.vm = new AchievementVM(props)
  }
  render () {
    return (
      <div>
        <AchievementList vm={this.vm} />
      </div>
    )
  }
}

export default achievement
